<script>
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../config'
import { getSlot } from '../utils'
export default {
  props: {
    renderParams: {
      type: Object,
      default() {
        return {}
      }
    },
    renderOptions: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    active() {
      const { $table } = this.renderParams
      const { trigger, mode } = $table.editConfig

      return trigger === 'single' && mode === 'cell'
    }
  },
  methods: {
    /** @param {Event} e */
    handleClick(e) {
      const {
        $columnIndex,
        $table,
        $rowIndex,
        column,
        columnIndex,
        row,
        rowIndex
      } = this.renderParams
      const { $tableInstance } = this.renderOptions
      e.stopPropagation()
      $table.clearActived()
      $tableInstance.$emit('edit-closed', {
        $columnIndex,
        $table,
        $event: e,
        $grid: $table.$xegrid,
        $rowIndex,
        column,
        columnIndex,
        row,
        rowIndex
      })
    }
  },
  render(h) {
    const Bem = createBem(`${tableNamespace}__editable-save`)
    const slot = getSlot(this)

    if (this.active === false) {
      return slot()
    }

    return (
      <div class={Bem()}>
        <div class={Bem('wrap')}>{slot()}</div>
        <i
          class={`${Bem('icon', { disabled: this.disabled })} el-icon-folder`}
          onClick={this.handleClick}
        />
      </div>
    )
  }
}
</script>

<style scoped lang="scss">
@import '../variables.scss';

.#{$TableNameSpace} {
  &__editable-save {
    display: flex;
    position: relative;
    height: 24px;
    align-items: center;

    &__wrap {
      display: inline-block;
      flex-basis: calc(100% - 20px);
    }

    &__icon {
      position: absolute;
      right: 0;
      cursor: pointer;
      flex-basis: 20px;
      &--disabled {
        cursor: not-allowed;
      }
    }
  }
}
</style>
